<template>
  <div>
    <div  style="width:100%;">
      <div class="add_form">
        <el-form inline ref="stuForm" :model="stuForm" :rules="rules">
          <el-form-item prop="addemail">
             <el-input v-model="stuForm.addemail"></el-input>
          </el-form-item>
            <el-form-item prop="adduserName">
             <el-input v-model="stuForm.adduserName"></el-input>
          </el-form-item>
            <el-form-item prop="addphone">
             <el-input  v-model="stuForm.addphone"></el-input>
          </el-form-item>
          <el-form-item >
             <el-button type="primary" @click="toAdd">添加</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 搜索表单 -->
       <div class="add_form">
        <el-form inline :model="queryForm">
          <el-form-item>
            <el-input v-model="queryForm.email" placeholder="邮箱搜索"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="queryForm.userName" placeholder="姓名搜索"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="queryForm.phone" placeholder="手机搜索"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="toSearch">查询</el-button>
          </el-form-item>
        </el-form>
       </div>
       <div class="add_form">
        <table-title title="学员列表"></table-title>
         <el-table border stripe :data="stuList"> 
            <el-table-column label="用户名" prop="userName"></el-table-column>
            <el-table-column label="邮箱" prop="email"></el-table-column>
            <el-table-column label="手机号" prop="phone"></el-table-column>
            <el-table-column label="注册日期">
              <template #default="{row}">
                <div>
                   {{new Date(row.createAt).toLocaleString()}}
                 </div>
              </template>
            </el-table-column>
            <el-table-column label="是否冻结">
              <template #default="{row}">
                <div>
                    {{row.isstate?'已冻结':'可用'}}
                 </div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="{row}">
                <div>
                   <el-link @click="toFreeze(row.tokenId)" :type="row.isstate?'success':'danger'">
                    {{row.isstate?'解冻':'冻结'}}
                   </el-link>
                </div>
              </template>
            </el-table-column>
         </el-table>
         <el-pagination @current-change="pageChange" background :total="total" :page-size="3"
         layout="prev,pager,next"></el-pagination>
       </div>
    </div>
  </div>
</template>
<script>
// 导入写好的添加学生接口
import {addStudentApi,getStudentListApi,freezeStudentApi} from '@/api/student'
export default {
    data(){
      return { 
        total:0,//数据总条数
        stuList:[],//学生列表
        queryForm:{ //搜索和分页需要的数据
          pageStart:1,
          userName:"",
          email:"",
          phone:""
        },
        stuForm:{//v-model的数据
          addemail:"",
          adduserName:"",
          addphone:"",

        },
        rules:{
          addemail:[{pattern:/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/,message:"请输入正确的邮箱",trigger:"blur"}],
          adduserName:[{required:true,message:"请输入用户名",trigger:"blur"}],
          addphone:[{pattern:/^1[3456789]\d{9}$/,message:"请输入正确的手机号",trigger:"blur"}]
        }
      }
    },
    created(){
      this.getList()
    },
    methods:{
      async toFreeze(tokenId){ //冻结解冻学员功能
          let res=await freezeStudentApi(tokenId)
          if(res.success){
            this.$message.success("操作成功")
          }
          this.getList()
      },
      toSearch(){ //查询功能
        this.getList()
        // 查询完之后重置查询条件
        this.queryForm.userName=""
        this.queryForm.email=""
        this.queryForm.phone=""
      },
      pageChange(page){ //分页器改变
        this.queryForm.pageStart=page//改变页码
        this.getList()
      },
      toAdd(){
         this.$refs.stuForm.validate(async (valid)=>{
           if(valid){
            // 调用添加学生 接口
              let res=await addStudentApi(this.stuForm)
                if(res.success){
                  this.$message.success("添加成功")
                  // 表单自带重置方法
                  this.$refs.stuForm.resetFields()
                  this.getList()//重新获取数据
                }
             }
         })
      },
      async getList(){ //获取学员列表
          let res=await getStudentListApi(this.queryForm)
          console.log(res,"---学生列表")
          this.stuList=res.data.list
          this.total=res.data.count;
      }
    }
}
</script>
<style lang="scss">
.add_form{
  width:900px;
  margin: 20px auto;
}
</style>